<template>
  <CustomTableCard 
    footer
    :total="total" 
    :page.sync="queryParams.page" 
    :limit.sync="queryParams.limit" 
    @on-page="getList">
    <div slot="header">
      <v-row>
        <v-col cols="2">
          <v-select
            v-model="queryParams.dateType"
            :items="['创建时间', '出团时间']"
            solo
            dense
            outlined
            flat
            hide-details
          ></v-select>
        </v-col>
        <v-col cols="3">
          <date-picker v-model="queryParams.dateRange"></date-picker>
        </v-col>
        <v-col cols="3">
          <v-text-field
            v-model.trim="queryParams.keyword"
            :label="$t('placeholder.keyword')"
            outlined
            dense
            hide-details
            clearable
            @keyup.enter.native="getList(1)"
          ></v-text-field>
        </v-col>
        <v-col>
          <v-btn color="info" class="mr-3" @click="getList(1)">{{ $t('actions.search') }}</v-btn>
        </v-col>
        <v-col cols="1" class="text-right">
          <v-btn color="primary" @click="showDrawer = true">{{ $t('actions.add') }}</v-btn>
        </v-col>
      </v-row>
    </div>
    <el-table
      v-loading="listLoading"
      v-auto-height
      :height="tableHeight"
      :data="tableData"
      stripe
      fit
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        align="center"
        width="55">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="团号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="tag"
        show-overflow-tooltip
        label="产品名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="接团日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="散团日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="下单日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="客户名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="联系人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="联系电话"
        width="180">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="应收总款"
        width="180">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="已收款"
        width="180">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="未收款"
        width="180">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="所属部门"
        width="180">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="所属员工"
        width="180">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="备注"
        width="180">
      </el-table-column>
      <el-table-column
        fixed="right"
        :label="$t('system.fields.action')"
        align="center"
        width="180">
        <template slot-scope="{ row }">
          <v-btn class="mr-2" small color="primary" outlined @click="handleEdit(row)">{{ $t('actions.edit') }}</v-btn>
          <v-btn small color="warning" outlined @click="handleRmove(row)">{{ $t('actions.delete') }}</v-btn>
        </template>
      </el-table-column>
    </el-table>
    <div slot="actions">
      <v-btn small color="warning" :disabled="!multipleSelection.length" class="mr-2" @click="handleRmove()">{{ $t('actions.delete') }}</v-btn>
      <!-- <v-btn small color="success" :disabled="!multipleSelection.length" class="mr-2" @click="setStatusAll(1)">{{ $t('actions.open') }}</v-btn> -->
      <!-- <v-btn small color="warning" :disabled="!multipleSelection.length" @click="setStatusAll(2)">{{ $t('actions.close') }}</v-btn> -->
    </div>
  </CustomTableCard>
</template>

<script>
import * as systemApi from '@/api/system'
import mixin from '../mixin'

export default {
  name: 'singleList',
  mixins: [mixin],
  created() {
    this.getList()
  },
  activated() {
    console.log('activated')
    this.getList()
  },
  deactivated() {
    console.log('deactivated')
  },
  data() {
    return {
      tableData: [{}],
      total: 0,
      listLoading: false,
      queryParams: {
        page: 1,
        limit: 20,
        keyword: '',
      },

      multipleSelection: [],

      rules: {
        required: value => !!value || 'required',
      }
    }
  },

  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取列表
    getList(page) {
      if (/\d+/.test(page)) {
        this.queryParams.page = page
      }
      this.listLoading = true
      systemApi.langList(this.queryParams).then(response => {
        this.tableData = response.data.data
        this.total = response.data.count
      }).finally(() => {
        this.listLoading = false
      })
    },
    // 编辑列表
    handleEdit(row) {
      // 
    },
    // 删除列表
    handleRmove(row) {
      let ids = []
      if (row) {
        ids = [row.id]
      } else {
        ids = this.multipleSelection.map(item => item.id)
      }
      this.$confirm(this.$t('tips.delete'), this.$t('other.tip'), {
        center: true,
        type: 'warning'
      }).then(() => {
        systemApi.deleteLang({id: ids}).then(() => {
          this.$message.success('success')
          this.getList()
        })
      })
    },
    // // 批量设置状态
    // setStatusAll(status) {
    //   let ids = this.multipleSelection.map(item => item.id)
    //   this.updateStatus({id: ids, status})
    // },
    // // 设置状态
    // setStatus(row) {
    //   let status = row.status == 1 ? 2 : 1
    //   this.updateStatus({id: [row.id], status})
    // },
    // // 更新状态
    // updateStatus(params) {
    //   systemApi.changeStatus(params).then(() => {
    //     this.$message.success('success')
    //     this.getList()
    //   })
    // },
  }
}
</script>
